<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>N-BACK记忆题生成器</title>
    <style>
        #count{
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">
            N-BACK记忆题生成器
        </div>
        <div class="layui-card-body">
            <div class="layui layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">题目数量</label>
                    <div class="layui-input-block">
                        <input type="number" id="total" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">间隔</label>
                    <div class="layui-input-block">
                        <input type="number" id="gap" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">后退步数</label>
                    <div class="layui-input-block">
                        <input type="number" id="back" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">随机范围</label>
                    <div class="layui-input-block">
                        <input type="number" id="range" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题字号</label>
                    <div class="layui-input-block">
                        <input type="number" value="45" id="question-size" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选项字号</label>
                    <div class="layui-input-block">
                        <input type="number" id="answer-size" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">英文模式</label>
                    <div class="layui-input-block">
                        <input class="layui-input" type="radio" name="eng" title="否" value="0" checked>
                        <input class="layui-input" type="radio" name="eng" title="是" value="1">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生成配置</label>
                    <div class="layui-input-block">
                        <button class="layui-btn" onclick="generateString()">
                            生成
                        </button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生成结果</label>
                    <div class="layui-input-block">
                        <textarea id="result" rows="6" class="layui-textarea"></textarea>
                        <p id="count"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const total = $('#total').val();
    const gap = $('#gap').val();
    const back = $('#back').val();
    const range = $('#range').val();
    const questionSize = $('#question-size').val();
    const answerSize = $('#answer-size').val();
    const isEng = $('input[name="eng"]:checked').val() == 1? true : false;
    // 先生成题目列表
    // 题目列表 [ questionList: [1], rightList: [1], wrongList: [n] ],[]...
    let questionList = [];
    for(let i = 0; i < total; i ++){
        let newQuestion = {
            question: '',
            right: [],
            wrong: []
        }
        questionList.push(newQuestion);
    }
    let result = [];
    for(let i = 0;i < back; i ++){
        let newItem = {
            pos: [gap * i],
            type: 'gateNormal2',
            col: 2,
            x: [1,2],


        }
    }
</script>
</html>